<template>
    <view class="gjl-view">
        <view class="search-box">
            <view class="left">
                <view class="cover-left">
                    <mIcon type="sousuo" size="14" color="#999"></mIcon>
                </view>
                <view class="input-box">
                    <input v-model="listQuery.nameAll" class="uni-input" confirm-type="search" @confirm="doSearch"
                        placeholder-style="color:#333;font-size:28rpx;" placeholder="请输入搜索内容" />
                </view>
                <view class="cover-right" v-show="listQuery.nameAll" @click="clearSearch">
                    <mIcon type="err" size="14" color="#999"></mIcon>
                </view>
            </view>
            <view class="right" @click="doSearch">
                搜索
            </view>
        </view>
        <view class="main">
            <view class="search-list">
                <view class="search-li" @click="$routerTo({path: '/pages/components/gw-book-detail',query:{booksId:item.booksId}})" v-for="(item,index) in list" :key="index">
                    <searchList :item='item' @btnClick="btnClick"></searchList>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import searchList from './components/search-list.vue'
    import service from "@/service";
    export default {
        components: {
            searchList
        },
        data() {
            return {
                list: [],
                listQuery: {
                    page: 1,
                    limit: 10,
                    nameAll: ''
                },
                pos: {}
            }
        },
        onLoad(res) {
            this.pos = res
        },
        mounted() {
            this.getBooks()
        },
        onReachBottom() {
            this.getBooks();
        },
        methods: {
            // 添加
            btnClick(item) {
                let data = {}
                if (this.pos.bookstoreSortId) {
                    data = {
                        booksId: item.booksId,
                        bookstoreSortId: this.pos.bookstoreSortId
                    }
                }else{
                    data = {
                        booksId: item.booksId
                    }
                }
                service.mineService.BookstoreAddSearchBookstore({
                    data: data,
                    success: res => {
                        uni.navigateBack({
                            delta: 1
                        })
                        uni.showToast({
                            title: '添加成功',
                            icon: 'none'
                        })
                    },
                    fail: () => {

                    },
                    complete: () => {
                        
                    },
                });
            },
            // 获取书籍列表
            getBooks() {
                service.homeService.getBooks({
                    data: { ...this.listQuery
                    },
                    success: res => {
                        this.list = this.list.concat(res.result.data);
                        if (res.result.data.length > 0) {
                            this.listQuery.page++
                        }
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            clearSearch() {
                this.listQuery.nameAll = ''
                this.getBooks()
            },
            doSearch() {
                this.listQuery.page = 1
                this.list = []
                this.getBooks()
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        min-height: 100%;
        overflow: hidden;

        .main {
            margin: 0 30rpx;

            .search-list {
                margin-top: 52rpx;

                .search-li+.search-li {
                    margin-top: 70rpx;
                }
            }
        }

        .search-box {
            margin: 20rpx 50rpx 0 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                height: 68rpx;
                display: flex;
                align-items: center;
                width: 580rpx;
                background: rgba(249, 249, 249, 1);
                border-radius: 40rpx;

                .cover-left {
                    margin-left: 35rpx;
                }

                .input-box {
                    flex: 1 1 auto;
                    padding-left: 23rpx;
                    display: flex;

                    .uni-input {
                        flex: 1 1 auto;
                    }
                }

                .cover-right {
                    margin-left: 30rpx;
                    margin-right: 30rpx;
                }
            }
        }

        .right {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }
    }
</style>
